window.onload = function () {
	let banner_img_index = 0 // 标记下一张要展示的索引
	let banner_img_addreddArr = [
		'./img/index/banner//banner1.jpg',
		'./img/index/banner/banner2.jpg',
		'./img/index/banner/banner3.jpg'
	] // 图片地址
	let banner_flag = 0 // 用于更改两个展示banner的img的选择
	let product_menu_img_addressArr = [
		[
			'./img/index/product_img/product (1).jpg',
			'./img/index/product_img/product (2).jpg',
			'./img/index/product_img/product (3).jpg',
			'./img/index/product_img/product (4).jpg',
			'./img/index/product_img/product (5).jpg',
			'./img/index/product_img/product (6).jpg'
		],
		[
			'./img/index/product_img/product (7).jpg',
			'./img/index/product_img/product (8).jpg',
			'./img/index/product_img/product (9).jpg',
			'./img/index/product_img/product (10).jpg',
			'./img/index/product_img/product (11).jpg',
			'./img/index/product_img/product (12).jpg'
		],
		[
			'./img/index/product_img/product (13).jpg',
			'./img/index/product_img/product (14).jpg',
			'./img/index/product_img/product (15).jpg',
			'./img/index/product_img/product (16).jpg',
			'./img/index/product_img/product (17).jpg',
			'./img/index/product_img/product (18).jpg'
		],
		[
			'./img/index/product_img/product (19).jpg',
			'./img/index/product_img/product (20).jpg',
			'./img/index/product_img/product (21).jpg',
			'./img/index/product_img/product (22).jpg',
			'./img/index/product_img/product (23).jpg',
			'./img/index/product_img/product (24).jpg'
		]
	]

	let our_team_addressArr = [
		'./img/index/team/di.gif',
		'./img/index/team/fei.gif',
		'./img/index/team/jie.gif',
		'./img/index/team/Wei.gif',
		'./img/index/team/team.gif',
		'./img/index/team/free.gif'
	]
	let introduce_img_arr = [
		'./img/index/introduces/introduce1.jpg',
		'./img/index/introduces/introduce4.jpg'
	]
	// 预加载
	preloader(banner_img_addreddArr)
	preloader(our_team_addressArr)
	preloader(introduce_img_arr)

	// 给team成员写入背景图片地址
	$('#our_team_box > div').each((index, val) => {
		$(val).css('background-image', `url(${our_team_addressArr[index]})`)
	})

	// banner左右按钮的动效及点击事件
	$('.arrow_group_left')
		.eq(0)
		.click((e) => {
			banner_img_index-- // 标记下一张的索引
			banner_flag = banner_flag == 0 ? 1 : 0 // 更改img标签的选择

			// 溢出处理
			if (banner_img_index < 0) {
				banner_img_index = 2
			}

			// 为下一个即将展示的img标签设置下一张图片的src
			$('.banner_img')
				.eq(banner_flag)
				.attr('src', banner_img_addreddArr[banner_img_index])

			// 为下一张即将展示的img标签调整位置
			// 这里重复设置，是为了防止点击了向右滑动后，img标签的位置不对
			$('.banner_img').eq(banner_flag).css({ top: '100vh', 'z-index': 2 })

			// 执行动画，从下方向上滑动
			// 在回调函数中，将另一个img标签移动到下方，并且设置z-index
			// 为当前展示的img标签设置z-index,防止下一次另一个标签出现时被覆盖
			$('.banner_img')
				.eq(banner_flag)
				.animate(
					{
						top: '0'
					},
					1000,
					function () {
						$('.banner_img')
							.eq(!banner_flag)
							.css({ top: '100vh', 'z-index': 2 })
						$('.banner_img').eq(banner_flag).css('z-index', 1)
					}
				)
		})

	$('.arrow_group_right')
		.eq(0)
		.click((e) => {
			banner_img_index++
			banner_flag = banner_flag == 0 ? 1 : 0

			if (banner_img_index >= 3) {
				banner_img_index = 0
			}
			$('.banner_img')
				.eq(banner_flag)
				.attr('src', banner_img_addreddArr[banner_img_index])

			$('.banner_img')
				.eq(banner_flag)
				.css({ top: '-100vh', 'z-index': 2 })

			$('.banner_img')
				.eq(banner_flag)
				.animate(
					{
						top: '0'
					},
					1000,
					function () {
						$('.banner_img')
							.eq(!banner_flag)
							.css({ top: '-100vh', 'z-index': 2 })

						$('.banner_img').eq(banner_flag).css('z-index', 1)
					}
				)
		})

	// read_more 按钮下方动效
	$('.carousel_template_introduce > div').mouseenter(() => {
		$('.carousel_template_introduce > div>span:nth-child(2)').animate(
			{
				'margin-left': '100%'
			},
			500,
			() => {
				$('.carousel_template_introduce > div>span:nth-child(2)').css(
					'margin-left',
					'-100%'
				)
				$(
					'.carousel_template_introduce > div>span:nth-child(2)'
				).animate({
					'margin-left': '0%'
				})
			}
		)
	})

	// products中menu选项卡切换
	$('#product_menu > li').each((i, val) => {
		$(val).click(() => {
			$('#product_menu > li').each((index, val) => {
				$(val).removeClass('product_menu_checked')
			})

			$(val).addClass('product_menu_checked')

			$('#product_group > .product_item img').each((index, val) => {
				$(val).css('display', 'none')
				$(val).attr('src', product_menu_img_addressArr[i][index])
				$(val).fadeIn(200)
			})

			$('#product_menu_shadow_bg').animate(
				{
					left: `${$(val).offset().left}px`
				},
				500
			)
		})
	})

	// 绑定introduce左右按钮的移动事件
	$('.arrow_group_right')
		.eq(1)
		.click(() => {
			move(true, '.introduce_group_display', 13, 500)
		})

	$('.arrow_group_left')
		.eq(1)
		.click(() => {
			move(false, '.introduce_group_display', 13, 500)
		})
}
